<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<div id="app">
			<table class="table table-hover">
				<caption>京淘电商平台</caption>
				<thead>
					<tr>
						<th>标签</th>
						<th>标题</th>
						<th>卖点</th>
						<th>价格</th>
						<th>数量</th>
					</tr>
					<tbody>
						<tr v-for="o in msg">
							<td>{{o.id}}</td>
							<td>{{o.title}}</td>
							<td>{{o.sellPoint}}</td>
							<td>{{o.price}}</td>
							<td>{{o.num}}</td>
						</tr>
					</tbody>
				</thead>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:"hi vue"
			},
			mounted() { //自定义方法就放在mounted放在中
				axios({ //axios封装ajax,本质ajax
					method:"post",//以post方式发起请求
					url:"http://localhost:8080/item/list/5"
				})
				.then(//请求之后响应处理方法,返回对象封装response(res)
				   res=>{//数据:res.data属性json字符串
					   //console.log(res.data)
					   this.msg=res.data
				   }
				)
			}
		})
	</script>
</html>
